<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
	<title>dhtmlxGrid. Server side</title>
	<script src="<c:out value="${pageContext.request.contextPath}"/>/resources/tutorial/common/dhtmlx/dhtmlx.js" type="text/javascript"></script>
	<script type="text/javascript" src="<c:out value="${pageContext.request.contextPath}"/>/resources/tutorial/common/jquery-2.1.3.min.js"></script>
	<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/resources/tutorial/common/dhtmlx/dhtmlx.css"/>
	<style>
		html, body {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0px;
		}
	</style>	
</head>
<body>
	<div id="box" style="width:250px; hright160px; background-color:white;"></div>
	<script>
		var contextPath = "${pageContext.request.contextPath}" + "/resources/tutorial";
		
		formData = [ 
		    {type : "block",list : [ 
				{type : "fieldset", label : "Customer details",width : 267,list : [ 
					{type : "input", name : "name", label : "Name", labelWidth : 50}, 
					{type : "input", name : "address", label : "Address", labelWidth : 50}, 
					{type : "input", name : "email", label : "Email", labelWidth : 50}, 
					{type : "button", name : "save", offsetTop : 10, value : "Submit"}
				]} 
			]}, 
			{type : "block", list : [ 
				{type : "button", name : "button1", value : "Customer 1", offsetTop : 10}, 
				{type : "newcolumn"}, 
				{type : "button", name : "button2", value : "Customer 2", offsetTop : 10} 
			]} 
		];
		
		var myform = new dhtmlXForm("box", formData);
		
		var updateId = 0;
		
		myform.attachEvent("onButtonClick", function(id){
			
			if ( id == 'button1' ) {
				var id = 1;

				var tableRequest = $.ajax({
					url: '/bwf/tutorial6/selectOne',
					contentType: 'application/json; charset=UTF-8',
					type: 'POST',
					data: JSON.stringify(id),
					dataType: 'json'
				});
				
				tableRequest.done(function(info) {
					myform.setItemValue("name", info['name']);
					myform.setItemValue("address",info['address']);
					myform.setItemValue("email", info['email']);
				});
				
				updateId = id;
			} 
			else if ( id == 'button2' ) {
				var id = 2;
				
				var tableRequest = $.ajax({
					url: '/bwf/tutorial6/selectOne',
					contentType: 'application/json; charset=UTF-8',
					type: 'POST',
					data: JSON.stringify(id),
					dataType: 'json'
				});
				
				tableRequest.done(function(info) {
					myform.setItemValue("name", info['name']);
					myform.setItemValue("address",info['address']);
					myform.setItemValue("email", info['email']);
				});
				
				updateId = id;
			}
			else if ( id == 'save' ) {
				var id 		= updateId;
				var name 	= myform.getItemValue("name");
				var address = myform.getItemValue("address");
				var email	= myform.getItemValue("email");
				
				var updateData = {id:id, name:name, address:address, email:email};
				
				var tableRequest = $.ajax({
					url: '/bwf/tutorial6/update',
					contentType: 'application/json; charset=UTF-8',
					type: 'POST',
					data: JSON.stringify(updateData),
					dataType: 'json'
				});
				
				tableRequest.done(function(resultStr) {
					alert(resultStr);
				});
			}
		})
	</script>
</body>
</html>